/* 新消息提醒 */
<template>
<div>
    <!-- 设置区域 -->
    <div class="PrivacySettings">接受有氧新消息</div>
    <div class="settingBox">
        <!-- 提醒有氧更新 youyangUpdate-->
        <div class="MyComments commentBox">
            <div class="settingBoxLeft">提醒有氧更新</div>
            <div class="settingBoxRight" @click="aerobicUpdates()">
                <!--mt-switch Boolean -->
                <mt-switch v-model="youyangUpdate"></mt-switch>
            </div>
        </div>
        <!-- 关注栏目更新 followCategoryUpdate-->
        <div class="MyComments commentBox">
            <div class="settingBoxLeft">关注栏目更新</div>
            <div class="settingBoxRight" @click="columnUpdate()">
                <!--mt-switch Boolean -->
                <mt-switch v-model="followCategoryUpdate"></mt-switch>
            </div>
        </div>
        <!-- 关注人更新 followUserUpdate-->
        <div class="MyComments commentBox">
            <div class="settingBoxLeft">关注人更新</div>
            <div class="settingBoxRight" @click="FollowersUpdate()">
                <!--mt-switch Boolean -->
                <mt-switch v-model="followUserUpdate"></mt-switch>
            </div>
        </div>
    </div>
    <div class="PrivacySettings">其他</div>
    <!-- 接收具体更新内容 detailUpdate-->
    <div class="settingBox">
        <div class="MyComments commentBox">
            <div class="settingBoxLeft">接收具体更新内容</div>
            <div class="settingBoxRight" @click="specificUpdates()">
                <!--mt-switch Boolean -->
                <mt-switch v-model="detailUpdate"></mt-switch>
            </div>
        </div>
    </div>
</div>
</template>

<script>
import controller from "@/components/controllers/controllers";

export default {
    name: "NewNewsAlert",
    components: {},
    data() {
        return {
            followUserUpdate: true, //关注人更新，1是 ,-1否
            followCategoryUpdate: false, //关注栏目更新，1是,-1否
            youyangUpdate: true, //提醒有氧更新，1是,-1否
            detailUpdate: false, //接收具体更新内容，1是,-1否
        };
    },
    mounted() {
        this.notifySettingH5();
    },
    methods: {
        // 防抖封装方法
        debounce(fun) {
            if (this.timer) {
                clearTimeout(this.timer);
            }
            this.timer = setTimeout(() => {
                fun.call(this);
            }, 400);
        },
        // 获取数据信息
        notifySettingH5() {
            controller
                .notifySettingH5({
                    token: localStorage.getItem("token"),
                })
                .then((res) => {
                    console.log("获取数据信息", res);
                    this.followUserUpdate =
                        resbaseData.followUserUpdate == 1 ? true : false;
                    this.followCategoryUpdate =
                        resbaseData.followCategoryUpdate == 1 ? true : false;
                    this.youyangUpdate = resbaseData.youyangUpdate == 1 ? true : false;
                    this.detailUpdate = resbaseData.detailUpdate == 1 ? true : false;
                });
        },
        // 更新接收具体内容
        updateNotifySetting() {
            let params = {
                followUserUpdate: this.followUserUpdate ? 1 : -1,
                followCategoryUpdate: this.followCategoryUpdate ? 1 : -1,
                youyangUpdate: this.youyangUpdate ? 1 : -1,
                detailUpdate: this.detailUpdate ? 1 : -1,
                token: localStorage.getItem("token"),
            };
            console.log("params", params)
            controller
                .updateNotifySetting(params)
                .then((res) => {
                    console.log("修改数据", res);
                    this.$Toast.show({
                        title: "修改成功",
                    });
                })
                .catch((err) => {
                    console.log("err", err);
                });
        },
        // 提醒有氧更新
        aerobicUpdates(e) {
            let that = this
            this.$nextTick(() => {
                that.debounce(() => {
                    if (!that.followUserUpdate || !that.followCategoryUpdate || !that.youyangUpdate) {
                        that.detailUpdate = false
                    } else if (this.followUserUpdate && this.followCategoryUpdate && this.youyangUpdate) {
                        this.detailUpdate = true
                    }
                    that.updateNotifySetting()
                })
            })
        },
        // 关注栏目更新
        columnUpdate() {
            let that = this;
            this.$nextTick(() => {
                that.debounce(() => {
                    if (!that.followUserUpdate || !that.followCategoryUpdate || !that.youyangUpdate) {
                        that.detailUpdate = false
                    } else if (this.followUserUpdate && this.followCategoryUpdate && this.youyangUpdate) {
                        this.detailUpdate = true
                    }
                    console.log("detailUpdate", that.detailUpdate)
                    that.updateNotifySetting();
                });
            });
        },
        // 关注人更新
        FollowersUpdate() {
            let that = this;
            this.$nextTick(() => {
                that.debounce(() => {
                    if (!that.followUserUpdate || !that.followCategoryUpdate || !that.youyangUpdate) {
                        that.detailUpdate = false
                    } else if (this.followUserUpdate && this.followCategoryUpdate && this.youyangUpdate) {
                        this.detailUpdate = true
                    }
                    that.updateNotifySetting();
                });
            });
        },
        //接受具体更新内容
        specificUpdates() {
            let that = this;
            this.$nextTick(() => {
                that.debounce(() => {
                    if (that.detailUpdate) {
                        that.followUserUpdate = true
                        that.followCategoryUpdate = true
                        that.youyangUpdate = true
                    } else {
                        that.followUserUpdate = false
                        that.followCategoryUpdate = false
                        that.youyangUpdate = false
                    }
                    that.updateNotifySetting();
                });
            });
        }
    },
};
</script>

<style lang="scss" scoped>
.PrivacySettings {
    // width: 750px;
    line-height: 78px;
    background-color: #f6f6fa;
    padding-left: 26px;
    box-sizing: border-box;
    color: #a8acbb;
    font-size: 24px;
}

/*我的设置等--区域*/
.settingBox {
    width: 100%;
    padding: 0 25px;
    box-sizing: border-box;
    background-color: #fff;

    .MyComments {
        width: 100%;
        height: 108px;
        border-bottom: 2px solid #f2f2f2;

        .settingBoxLeft {
            font-size: 30px;
            color: #323232;
            font-weight: 500;
        }

        .settingBoxRight {
            color: #a8acbb;
            font-size: 30px;
            display: flex;
            align-items: center;

            .mint-switch-input:checked+.mint-switch-core {
                border-color: #e76d4f !important;
                background-color: #e76d4f !important;
            }
        }
    }

    .commentBox {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
}
</style>
